<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header" :style="{ background: `url(${enterprise.avatar})` }">
      <!-- 上方商家信息1 -->
      <div class="headerInfo">
        <div class="Ifno-top">
          <img class="logo" :src="enterprise.avatar" alt="" />
          <div class="Info-text">
            <div class="first-line">乡村基</div>
            <div class="secend-line">美团专送</div>
            <div class="third-line">
              <span>满减</span>
            </div>
          </div>
          <!-- 遮罩层按钮 -->
          <van-button
            type="primary"
            size="mini"
            text="5个"
            @click="show = true"
          />
        </div>
        <div class="Info-bottom">公告</div>
      </div>
      <!-- 选项卡标签 -->
      <van-tabs v-model="activeName">
        <van-tab title="商品" name="/home/goods-list" to="/home/goods-list"></van-tab>
        <van-tab title="评价" name="/home/evaluate" to="/home/evaluate"></van-tab>
        <van-tab title="商家" name="/home/enterprise" to="/home/enterprise"></van-tab>
      </van-tabs>
    </div>
    <!-- 内容 -->
    <div class="content">
      <router-view></router-view>
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" >
        <div class="block" />
      </div>
    </van-overlay>


    <!-- 购物车 -->
<ShopCar/>
  
  </div>
</template>

<script lang="ts">
import ShopCar from '@/components/ShopCar/ShopCar.vue';
import { Component, Vue } from "vue-property-decorator";
// 按需引入vant
import { Button } from "vant";

// 接口  语法  ：  interface  接口名字  {  属性名：数据类型}
interface IEnterpsise {
  avatar?: string; // 头像
  bulletin?: string; // 通告
  date?: Array<string>; // 营业时间
  deliveryPrice?: number; // 配送费
  deliveryTime?: number;
  description?: string; // 配送描述
  id?: number; // id
  minPrice?: number; // 最低金额
  name?: string; // 店铺名称
  pics?: string[]; //图片
  score?: number; // 评分
  sellCount?: number; // 总销售量
  supports?: string[];
}

@Component({
  // 注册vant
  components: {
    [Button.name]: Button,
    ShopCar,
  },
})
export default class extends Vue {
  // 数据
  activeName: string = "";
  enterprise: IEnterpsise = {};
  show: boolean = false;

  // 生命周期
  async created(): Promise<void> {
    // 关联当前路由跟标签table
    this.activeName=this.$route.path
    let res = await this.$api.getEnterpriseInfo();
    this.enterprise = res.data.data;
    console.log(this.enterprise);
  }
}
</script>

<style scoped lang="scss">
// 引入
//如果写@前面要加上一个~符号，  不需要url()  css引入 @import url('@/....路径)  css写了要加分号包括引入
@import "~@/assets/style/theme.scss";
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.container {
  .header {
    .headerInfo {
      backdrop-filter: blur(5px);
      height: 167.55px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .Ifno-top {
        display: flex;
        padding: 20px;
        .logo {
          width: 100px;
          height: 100px;
          border-radius: 15px;
          object-fit: cover;
        }
        .Info-text {
          margin-left: 30px;
        }
      }
      .Info-bottom {
        height: 80px;
        padding: 0 20px;
      }
    }
  }
  .content {
    height: calc(100vh - 43px);
  }
}
</style>